<!-- 集团文章、政策文件、 集团动态使用的导航栏-->
<template>
	<div class="content">
		<navbar @selectNav="onSelectNav"></navbar>
		<div class="breadcrumb-area mt-25 container" style="flex: 1">
			<div class="container-fluid">
				<div class="row">
					<div class="col-lg-3">
						<smenu style="margin-bottom: 18px" ref="cmenu" :title="title" :expand="expandMenu" :menus="categoryes" :activeIndex="activeIndex" @selectMenu="onSelectMenu"></smenu>
						<notice-com></notice-com>
					</div>
					<div class="col-lg-9 content-height">
						<transition name="fade-transform" mode="out-in">
							<router-view :key="$route.fullPath"></router-view>
						</transition>
					</div>
				</div>
			</div>
		</div>
		<footers></footers>
	</div>
</template>

<script>
import smenu from '@/components/menu'
import noticeCom from '@/components/notice'
import { Navbar, Footers } from '@/layout/components'
export default {
	components: {
		smenu,
		Navbar,
		Footers,
		noticeCom,
	},
	data() {
		return {
			categoryes: [],
			activeIndex: '',
			expandMenu: true,
			htmlContent: '<h1>Hello World!</h1>',
			query: {},
			title: '',
		}
	},
	watch: {
		'$route.path': function (nv) {
			this.setMenu()
		},
	},
	computed: {},
	created() {
		this.query = this.$route.query
		this.setMenu()
	},
	methods: {
		onSelectMenu({ item }) {
			if (item.colFrame == 0) {
				debugger
				// 跳转到外部链接
				return window.open(item.colPath)
			}
			let query = {}
			if (item.colId) {
				query.colId = item.colId
			}
			if (item.colQuery) {
				query.colQuery = item.colQuery
			}
			if (item.colTitle) {
				query.title = item.colTitle
			}
			this.$router.push({
				path: item.colPath,
				query: query,
			})
		},
		onSelectNav(item) {
			if (item.isShowChild) {
				return
			}
			if (item.colPath) {
				// this.setMenu(item.path)
				this.$router.push({
					path: item.colPath,
					query: {
						colId: item.colId,
						colQuery: item.colQuery,
					},
				})
			}
		},
		// 通过colId找到顶级路由title
		findTopNavMenuTitle(colId) {
			let currentItem = this.$store.getters.levelMenus.find((e) => {
				if (e.colId == colId) {
					return e
				}
			})
			if (!currentItem) {
				const navId = this.$route.query.navId
				currentItem = this.$store.getters.levelMenus.find((e) => {
					if (e.colId == navId) {
						return e
					}
				})
				colId = navId
			} else {
				if (currentItem.colParentId == -1) {
					return currentItem
				}
				const parentNav = this.$store.getters.levelMenus.find((e) => {
					if (currentItem.colParentId == e.colId) {
						return e
					}
				})
				this.activeIndex = colId
				return parentNav
			}
		},
		setMenu(colId) {
			let categoryes = []
			if (!colId) {
				colId = this.$route.query.colId
			}
			this.$nextTick(() => {
				if (colId) {
					const parentNav = this.findTopNavMenuTitle(colId)
					if (parentNav) {
						const parent = this.$store.getters.allMenus.find((e) => {
							if (e.colId == parentNav.colId) {
								return e
							}
						})
						categoryes = parent.children.map((e) => {
							return e
						})
						this.title = parent.colTitle
						this.categoryes = categoryes
					}
				}
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

// .bg-1 {
// 	background: rgba(0, 0, 0, 0) url('~@/assets/images/bg/nyban.jpg') repeat scroll center center / cover;
// 	height: 400px;
// 	flex-shrink: 0;
// }

.list-none {
	text-align: right;
}

.border-b {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
	/*border-bottom: 2px solid #529e2f;*/
	border-bottom: 2px solid #2c8eff;

	span {
		font-size: 24px;
		/*border-left: 8px solid #529e2f;*/
		border-left: 8px solid #2c8eff;
		padding-left: 10px;
	}
}

.art-tit {
	margin-top: 20px;
}

.art-info {
	color: #333;
	font-size: 16px;
	font-family: '微软雅黑';
	padding: 0;
	box-sizing: border-box;
	outline: none;
	background: #fff;
	text-align: center;
	margin: 40px 0;
}
</style>
